<template>
	<view class="modify">
		<news-nav :title="'修改'+title"  page="/pagesA/changeinfo/changeinfo" icon_left="icon-fanhuijiantou"></news-nav>
		<view class="box" v-if="title == '昵称'">
			<view class="title">我的{{title}}</view>
			<view class="input_box">
				<input maxlength="20" class="input" type="text" v-model="msg" :placeholder="'请输入'+title" value=""  />
				<text v-show="msg" @click="clear" class="input_icon iconfont icon-cuowuguanbiquxiao-yuankuang"></text>
			</view>
			<view class="data" v-show="title == '昵称'">{{msg.length}}/20</view>
			<view class="save" @click="save" :class="msg == '' ? 'save_unable' : ''">保存</view>
		</view>
		<view class="box" v-if="title == '抖音号'">
			<view class="title">我的{{title}}</view>
			<view class="input_box">
				<input maxlength="16" class="input" type="text" v-model="msg" :placeholder="'请输入'+title" value=""  />
				<text v-show="msg" @click="clear" class="input_icon iconfont icon-cuowuguanbiquxiao-yuankuang"></text>
			</view>
			<view class="data" v-show="title == '抖音号'">
				最多16个字,只允许包含字母、数字、下划线、和点，三十天内只能修改一次。
			</view>
			<view class="save" @click="save" :class="msg == '' ? 'save_unable' : ''">保存</view>
		</view>
		<view class="box" v-if="title == '简介'">
			<view class="title">我的{{title}}</view>
			<view class="textarea_box">
				<textarea class="textarea" type="text" v-model="msg" placeholder="填写个人简介更容易获得别人的关注哦" value=""  />
			</view>
			<view class="save" @click="save" :class="msg == '' ? 'save_unable' : ''">保存</view>
		</view>
	</view>
</template>

<script>
	import t from '../../common/helper.js';
	import NewsNav from '../../components/NewsNav.vue';
	
	export default {
		data() {
			return {
				user: '',
				msg: '',
				columnName: ''
			}
		},
		props: {
			title: {}
		},
		components: {
			NewsNav,
		},
		methods: {
			getmsg() {
				let vm = this;
				switch (this.title) {
						case '昵称' : 	
							this.columnName = 'userName';
							break;
						case '抖音号' : 
							this.columnName = 'userId';
							break;
						case '简介' : 
							this.columnName = 'introduce';
							break;
				}
				let data = uni.getStorageSync('user')[0]; 
				this.user = data;
				this.msg = data[vm.columnName];
			},
			save() {
				const vm = this;
				if(this.msg) {
					uni.showLoading({
						title: '修改中',
					});
					uni.request({
						url: `${t.o}/userchange`,
						method: 'POST',
						data: {
							userId: vm.user.userId,
							data: vm.msg,
							columnName: vm.columnName
						},
						success: res => {
							if(res.data.code == 1) {
								vm.user[vm.columnName] = vm.msg;
								uni.setStorageSync('user',[vm.user]);
								setTimeout(() => {
									uni.hideLoading();
									uni.redirectTo({
										url: '/pages/changeinfo/changeinfo'
									})
								},1000)
							}else {
								uni.hideLoading();
								uni.showToast({
									title: '修改失败',
								})
								uni.redirectTo({
									url: '/pages/changeinfo/changeinfo'
								})
							}
						}
					})
				}
				
			},
			clear() {
				this.msg = '';
			}
		},
		onLoad() {
			this.getmsg();
		}
	}
</script>

<style lang="scss">
	.modify {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		.box {
			width: 100%;
			height: 100%;
			margin-top: 30px;
			padding: 0 20px;
			box-sizing: border-box;
			.title, .data {
				color: #888888;
				font-size: 14px;
				line-height: 20px;
			}
			.input_box {
				width: 100%;
				margin: 20px 0 30px;
				position: relative;
				.input {
					height: 25px;
					line-height: 25px;
					padding-right: 20px;
				}
				.input_icon {
					text-align: center;
					height: 25px;
					line-height: 25px;
					vertical-align: middle;
					position: absolute;
					font-size: 18px;
					color: #888888;
					right: 0;
					top: 0;
				}
			}
			.textarea_box {
				box-sizing: border-box;
				margin-top: 20px;
				width: 100%;
				border-radius: 5px;
				background-color: #1c1c1c;
				padding: 20px 15px;
			}
			.save {
				margin-top: 30px;
				padding: 0 20px;
				height: 40px;
				line-height: 40px;
				background-color: #ff0000;
				text-align: center;
				border-radius: 5px;
			}
			.save_unable {
				background-color: #bf0000;
			}
		}
	}
</style>
